<template>
    <ve-histogram
            :data="chartData"
            :judge-width="true"
            width="100%"
            height="100%"

            :yAxis="yAxis"
            :settings="settings"
            :extend="chartExtend"
    ></ve-histogram>
</template>

<script>
    import api from '../../api'
    export default {
        data () {
            this.settings={
                xAxisType:'xAxisType',
                metrics: ['接入量'],
                dimension: ['CHNL_BIZ_NAME']
            }
            this.chartExtend = {
                legend:{
                    show:false
                },

                xAxis:{
                    type:'category',
                    axisLabel:{
                        color:'#fff',
                        fontSize:14
                    },
                    axisLine :{
                        show:true,
                        lineStyle:{
                            color:'#0090ff',
                            width:2
                        }
                    }
                },

                grid:{
                    bottom:12,
                    barWidth:10
                },
                series: {
                    barWidth: 40
                }
            }
            return {
                chartData: {
                    /*columns: ['渠道', '接入量'],
                    rows: [
                        { '渠道': '电话', '接入量': 1393 },
                        { '渠道': '微信', '接入量': 3530 },
                        { '渠道': '网页', '接入量': 2923 },
                        { '渠道': 'APP', '接入量': 1723 },
                    ],*/
                    columns:['渠道', '接入量'],
                    rows: []
                },
                yAxis:{
                    type: 'value',
                    name: '单位/个',
                    min: 0,
                    nameTextStyle:{
                        color:'#fff',
                        fontSize:14,
                        align:'right',
                        padding:[0,0,12,0]
                    },
                    splitLine: {
                        lineStyle:{
                            color:'#0090ff',
                            type:'dotted'
                        }
                    },
                    axisLabel:{
                        color:'#fff',
                        fontSize:14
                    },
                    axisLine:{
                        show:true,
                        lineStyle:{
                            color:'#0090ff',
                            width:2
                        }
                    }


                }
            }
        },
        created(){
            this.refresh()
        },
        methods:{
            async refresh(){
                this.chartData = await api.getChannelAccess();
            }
        }
    }
</script>
